import React, { FC, useEffect } from "react";
import classNames from "classnames/bind";
import style from "./index.module.scss";
import { Link, useNavigate } from "react-router-dom";
import { LoginOutlined } from "@ant-design/icons";
import { Typography, Flex, Button, Form, Input, Checkbox, message, Spin } from "antd";
import { LoginUserInfo, GetUserInfo } from "../../service";
import { useRequest } from "ahooks";
import { setUserToken } from "../../until/userToken";
import useGetUserDate from "../../hooks/useGetUserDate";
const CBN = classNames.bind(style);
const { Title } = Typography;

const Login: FC = () => {
  const USERNAME_KEY = "username";
  const PASSWORD_KEY = "password";
  const nav = useNavigate();
  //登录事件
  const { run, loading } = useRequest(
    async (username: string, password: string) => {
      const res = await LoginUserInfo({ username, password });
      return res;
    },
    {
      manual: true,
      onSuccess(data) {
        const token = data.token;
        setUserToken(token);
        message.success("登录成功！");
        nav("/manage/list");
      },
    },
  );

  const RememberUser = (username: string, password: string) => {
    localStorage.setItem(USERNAME_KEY, username);
    localStorage.setItem(PASSWORD_KEY, password);
  };

  const DeleteUser = () => {
    localStorage.removeItem(USERNAME_KEY);
    localStorage.removeItem(PASSWORD_KEY);
  };

  const GetUser = () => {
    return {
      username: localStorage.getItem(USERNAME_KEY),
      password: localStorage.getItem(PASSWORD_KEY),
    };
  };
  const [form] = Form.useForm();

  //生命周期
  useEffect(() => {
    const { username, password } = GetUser();
    //设置默认值
    form.setFieldsValue({ username, password });
  }, []);

  //触发提交事件
  const onFinish = (values: any) => {
    const { username, password, remember } = values;
    if (remember) {
      RememberUser(username, password);
    } else {
      DeleteUser();
    }
    run(username, password);
  };

  const Inouform = (
    <>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
        form={form}
      >
        <Form.Item label="用户名" name="username" rules={[{ required: true, message: "请输入用户名!" }]}>
          <Input />
        </Form.Item>

        <Form.Item label="密码" name="password" rules={[{ required: true, message: "请输入密码!" }]}>
          <Input.Password />
        </Form.Item>

        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Flex gap="middle" align="center" justify="center">
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Link to="/register">注册新用户</Link>
          </Flex>
        </Form.Item>
      </Form>
    </>
  );

  return (
    <div className={CBN("Register")}>
      <div className={CBN("box")}>
        <div className={CBN("head")}>
          <Flex gap="middle" align="center" justify="center">
            <Title level={3}>
              <LoginOutlined />
            </Title>
            <Title level={3}>用户登录</Title>
          </Flex>
        </div>
        <Spin spinning={loading}>
          <div className={CBN("container")}>{Inouform}</div>
        </Spin>
      </div>
    </div>
  );
};
export default Login;
